<template>
    <div>
      <el-form>
        <el-form-item>
          <el-button @click="$router.back()" style="margin-top: 10px;"   size="small">返回</el-button>
        </el-form-item>
      </el-form>
      <el-collapse :value="['1','2','3']">
        <el-collapse-item title="运行状态" name="1">
          <!--<el-row class="run-status" :gutter="20">-->
          <!--<el-col :span="20">-->
          <!--<span class="label">使用状态:</span>-->
          <!--<el-radio-group @change="update(function() {-->
          <!--})" style="margin-left: 10px;" size="mini" v-model="device.switchStatus">-->
          <!--<el-radio-button label="0">关闭</el-radio-button>-->
          <!--<el-radio-button label="1">开启</el-radio-button>-->
          <!--</el-radio-group>-->
          <!--</el-col>-->
          <!--</el-row>-->
          <el-row style="margin-top: 20px;" class="run-status" :gutter="20">
            <el-col :span="8">
              <span class="label">在线状态:</span>
              <span class="value">
                 <el-tag v-if="device.onlineStatus === 0" type="waring" size="small">离线</el-tag>
                 <el-tag v-if="device.onlineStatus === 1" type="success" size="small">在线</el-tag>
              </span>
            </el-col>
            <el-col :span="8">
              <span class="label">可用空间:</span>
              <span class="value">{{device.ram}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">IP地址:</span>
              <span class="value">{{device.ipaddress}}</span>
            </el-col>
            <!--<el-col :span="8">-->
              <!--<span class="label">最近登录时间:</span>-->
              <!--<span class="value">{{device.ipAddress}}</span>-->
            <!--</el-col>-->
          </el-row>
          <!--<el-row class="run-status" :gutter="20">-->
            <!---->
          <!--</el-row>-->
        </el-collapse-item>
        <el-collapse-item title="设备信息" name="2">
            <el-row class="run-status" :gutter="20">
              <el-col :span="8">
                <span class="label">设备名称:</span>
                <span v-show="!edit.name" class="value">{{device.name}} <i @click.stop="editName" style="color: #000;" class="el-icon-edit"></i></span>
                <span style="display: inline-block;width: 100px;" v-show="edit.name"><el-input ref="name" v-model="device.name" size="mini" @blur="updateName"> </el-input></span>
              </el-col>
              <el-col :span="8">
                <span class="label">音量:</span>
                <span class="value">{{device.voiceSet}}</span>
              </el-col>
            </el-row>
          <el-row class="run-status" :gutter="20">
            <el-col :span="8">
              <span class="label">分辨率:</span>
              <span class="value"  >{{device.width}}*{{device.height}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">软件版本:</span>
              <span class="value">{{device.version}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">MAC:</span>
              <span v-show="!edit.mac" class="value">{{device.mac}} <i @click.stop="editMac" style="color: #000;" class="el-icon-edit"></i></span>
              <span style="display: inline-block;width: 100px;" v-show="edit.mac"><el-input ref="mac" v-model="device.mac" size="mini" @blur="updateMac"> </el-input></span>
            </el-col>
          </el-row>
            <el-row class="run-status" :gutter="20">
              <el-col :span="8">
                <span class="label">所属分组:</span>
                <span class="value">{{device.groupName}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">系统版本:</span>
                <span class="value">Android</span>
              </el-col>
            </el-row>
        </el-collapse-item>
        <el-collapse-item title="屏幕信息" name="3">
          <el-form>
            <el-form-item label="播放日程:">
              <div>
                <Schedule :did="id"></Schedule>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
</template>
<style scoped>
  .el-card__body{
    padding-top: 10px !important;
  }
</style>
<script>
  /* eslint-disable no-extend-native */
  import Schedule from '../../../components/Schedule'
  export default {
    name: 'device-info',
    components: {Schedule},
    data () {
      return {
        id: null,
        device: '',
        edit: {
          name: false,
          mac: false
        }
      }
    },
    created () {
      this.id = this.$route.query.id
      this.getInfo()
    },
    methods: {
      getInfo () {
        this.$http({
          url: this.$http.adornUrl(`/generator/stb/info/${this.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.device = data.stb
          }
        })
      },
      editName () {
        this.edit.name = true
        let self = this
        setTimeout(function () {
          self.$refs.name.focus()
          self.$refs.name.select()
        }, 100)
      },
      updateName () {
        this.edit.name = false
        let self = this
        this.update(function () {
          self.edit.name = false
        })
      },
      editMac () {
        this.edit.mac = true
        let self = this
        setTimeout(function () {
          self.$refs.mac.focus()
          self.$refs.mac.select()
        }, 100)
      },
      updateMac () {
        this.edit.mac = false
        let self = this
        this.update(function () {
          self.edit.mac = false
        })
      },
      update (callback) {
        this.$http({
          url: this.$http.adornUrl(`/generator/stb/update`),
          method: 'post',
          data: this.$http.adornData({
            'id': this.device.id,
            'name': this.device.name,
            'mac': this.device.mac,
            'switchStatus': this.device.switchStatus
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            callback(data)
            this.$message({
              message: '已更新',
              type: 'success',
              duration: 1000,
              onClose: () => {
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
  Date.prototype.pattern = function (fmt) {
    var o = {
      'M+': this.getMonth() + 1, // 月份
      'd+': this.getDate(), // 日
      'h+': this.getHours() % 12 === 0 ? 12 : this.getHours() % 12, // 小时
      'H+': this.getHours(), // 小时
      'm+': this.getMinutes(), // 分
      's+': this.getSeconds(), // 秒
      'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
      'S': this.getMilliseconds() // 毫秒
    }
    var week = {
      '0': '/u65e5',
      '1': '/u4e00',
      '2': '/u4e8c',
      '3': '/u4e09',
      '4': '/u56db',
      '5': '/u4e94',
      '6': '/u516d'
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '/u661f/u671f' : '/u5468') : '') + week[this.getDay() + ''])
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
    }
    return fmt
  }
</script>

<style scoped>
.run-status{
  color: #575e5b;
  margin-top: 5px;
}
  .run-status .value{
    display: inline-block;
    margin-left: 10px!important;
  }
</style>
